<template>
    <div class="discover">
        <div class="life" v-if="discoverName">
            <div class="title">
                <div class="tit-warp">
                    <em class="line" :style="'background-image: url(' + require('../../assets/image/discover/head.png') + ');'"></em>
                    <span class="tit">{{discoverName}}</span>
                    <em class="line" :style="'background-image: url(' + require('../../assets/image/discover/head.png') + ');'"></em>
                </div>
                <!--<div class="tit-warp clearfix"></div>-->
            </div>
            <ul class="clearfix">
                <li v-for="item in ad" @click="checkLogin(item.isLogin, item.detailsUrl, item.urlType)">
                    <a href="javascript:void(0)" ca="发现_精彩生活$头部列表">
                        <span><img :src="item.image" alt=""></span>
                        <!--<span class="desc">{{item.desc}}</span>-->
                    </a>
                </li>
            </ul>
        </div>
        <div class="life consulting-center" v-if="discoverName">
            <div class="title">
                <div class="tit-warp">
                    <em class="line" :style="'background-image: url(' + require('../../assets/image/discover/head.png') + ');'"></em>
                    <span class="tit">热门推荐</span>
                    <em class="line" :style="'background-image: url(' + require('../../assets/image/discover/head.png') + ');'"></em>
                </div>
                <!--<div class="tit-warp clearfix"></div>-->
            </div>
        </div>
        <list-box :listbox="listMsg"></list-box>
        <div v-if="listMsg && listMsg.length > 1" class="last-end">没有更多了</div>
    </div>
</template>

<script>

import common from "../../assets/js/common.js";    
import listBox from "./common/listbox";
import url  from 'url';
import qs from 'querystring';
import Vue from 'vue';

export default {
    data: function() {
        return {
            /** 配置栏目信息 **/
            discoverName: '',
            /** 配置栏目信息 **/

            title: '',
            ad: '',
            recommend: '',
            listMsg: []
        }
    },
    
    mounted: function() {
        
        var me = this;
        
        // 广告位
        me.adsense();
        
        // 推荐栏目
        me.listItem();
    },
    components: { listBox },
    methods: {
        /**
         * 广告位
         */
        adsense: function() {
            var me = this;
            
            // 路由参数
            var tar = url.parse(window.location.href).query;
            var tmpObj = qs.parse(tar);
            var appVersion = tmpObj.appVersion || '3.6'; // 默认版本
            var plateformType = tmpObj.plateformType || 'both'; // 默认平台 both android 和 ios 都可用 
            var cityCode = tmpObj.cityCode || '310100'; // 城市code
            
            // 版本，平台，城市code 存入 sessionStorage
            sessionStorage.setItem('appVersion', appVersion);
            sessionStorage.setItem('plateformType', plateformType);
            sessionStorage.setItem('cityCode', cityCode);
            
            me.$http.get(common.isdev() + '/cxb/app/discover/jcshlb/index.shtml', {}).then(function(d) {
                var data = me.parseData(d.body);
                if (data.errorCode == 0) {
                    //  设置栏目
                    if (data.result[0]['discoverName']) {
                        me.discoverName = data.result[0]['discoverName'];
                    }
                    
                    var len = data.result.length;
                    var listData = data.result;
                    var listArr = [];
                    // 过滤版本&过滤系统   // list [{}, {}, {}]   
                    while(len--) {
                        if (((data.result[len]['plateformType'] == 'both') || data.result[len]['plateformType'] == plateformType)  && data.result[len]['appVersion'] != appVersion) {
                            listArr.push(listData[len]);                            
                        }
                    }
                    
                    // 业务分类 分组   // map  {a: [{}, {}, {}], b: [{}] }
                    var objMap = {};
                    for(var i=0; i<listArr.length; i++) { // bizCategory [业务分类]
                        var artColumn = listArr[i]['artColumn'] || 'true';  // 如果是空的 是 跳转链接
                        if (objMap[artColumn]) { // 判断`bizCategory` 的value 值 
                            objMap[artColumn].push(listArr[i]); 
                        } else {
                            var _listArr = [];
                            _listArr.push(listArr[i]); // [{}, {}, {}]
                            objMap[artColumn] = _listArr;
                        }
                    }
                    
                    // 分组  // 按 objMap key的value遍历   // [{}, {}, {}]
                    // 是否显示  和  是否当前城市 和  全部城市  
                    var availableDetails = [];
                    for(var j in objMap) {
                        if (objMap[j].length == 1 && objMap[j][0].isShow == 1) { // isShow （1【显示】 0【隐藏】）   { b: [{}] }
                            if (objMap[j][0]['generic'] == 1) { // generic （1【全国显示】 0【全国隐藏】）
                            // 判断是否全国 
                                availableDetails.push(objMap[j][0]);
                            } else {
                            // cityCode 
                                var codeArr = objMap[j][0]['cityCode'].split(',');
                                for (var n=0; n<codeArr.length; n++) {
                                    if (codeArr[n] == cityCode) {
                                        availableDetails.push(objMap[j][0]);   
                                    }
                                }                               
                            }
                        } else {
                            var tmp = objMap[j];  //  {a: [{}, {}, {}] }
                            for(var m=0; m<tmp.length; m++) {
                                // 解析城市code
                                var codeArr = tmp[m]['cityCode'].split(',');
                                for(var t=0; t<codeArr.length; t++) {
                                    if (tmp[m].isShow == 1) {
                                        if (tmp[m]['generic'] == 1) {
                                            // 全国
                                            availableDetails.push(tmp[m]);
                                            break;
                                        } else if (codeArr[t] == cityCode) {
                                            // 各个城市
                                            availableDetails.push(tmp[m]);
                                        }
                                    }
                                }
                            }
                        }
                    }
                    
                    // 跳转url // urlType [1, 跳转文章列表栏目] [0, 跳转链接]
                    for (var n=0; n<availableDetails.length; n++) {
                        if (availableDetails[n]['urlType'] == 1) { // 跳转文章列表栏目
                            // 栏目分类
                            availableDetails[n]['detailsUrl'] = common.path() + '/discover/list/list.' + common.isHtml() + '?artColumn=' + availableDetails[n]['artColumn'];
                        } else if (availableDetails[n]['urlType'] == 0) { // 跳转链接
                            availableDetails[n]['detailsUrl'] = availableDetails[n]['artUrl'];
                        }
                    }
                    // 设置ad 数据
                    me.ad = availableDetails;
                }
                
            },function() {
                
            });
        },
        
        /**
         * 推荐栏目
         */
        listItem: function() {
            var me = this;
            
            // 路由参数
            var tar = url.parse(window.location.href).query;
            var tmpObj = qs.parse(tar);
            // 获取版本
            var ua = typeof window.navigator.userAgent === 'object' ? JSON.parse(window.navigator.userAgent) : '';
            var appVersion  = ua.appVersion ? ua.appVersion : '3.5.1';
//          var appVersion = tmpObj.appVersion || '3.6'; // 默认3.5.1版本 不显示
            var plateformType = tmpObj.plateformType || 'both'; // 默认平台 both android 和 ios 都可用 
            var cityCode = tmpObj.cityCode || '310100'; // 城市code
            
            // 请求 列表数据 [artlist_001,洗车][artlist_002,美容][artlist_003,保养][artlist_004,轮胎]
            me.$http.get(common.isdev() + '/cxb/app/discover/discoveydetail/index.shtml', {}).then(function(d) {
                var data = me.parseData(d.body);
                if (data.errorCode == 0) {
                    var len = data.result.creditTradeVOs.length;
                    var tmpData = data.result.creditTradeVOs;
                    
                    // 拼接url
                    while(len--) {
                        // type  [1,视频] [2, 文章] 
                        tmpData[len]['iconShow'] = 0;
                        if (tmpData[len].type == 1) {
                            tmpData[len]['detailsUrl'] = common.path()+'/discover/videodetails/videodetails.'+common.isHtml()+'?artColumn=' + tmpData[len]['artColumn'] + '&artId=' + tmpData[len]['id'];
                        } else if(tmpData[len].type == 2) {
                            tmpData[len]['detailsUrl'] = common.path()+'/discover/imgdetsils/imgdetsils.'+common.isHtml()+'?artColumn=' + tmpData[len]['artColumn'] + '&artId=' + tmpData[len]['id'];
                        }
                    }
                    
                    var listArr = [];
                    // 过滤版本&过滤系统
                    for (var i=0; i<tmpData.length; i++) {
                        var tmpDataAppVersion = tmpData[i]['notApp'] && tmpData[i]['notApp'].split(',');
                        if (tmpDataAppVersion) {
                            // 匹配版本
                            for (var t=0; t<tmpDataAppVersion.length; t++) {
                                // 过滤版本 和 系统
                                if (tmpDataAppVersion[t] != appVersion && (plateformType || tmpData[i]['plateformType'] == plateformType)) {
                                    listArr.push(tmpData[i]);
                                    break;
                                }
                            }
                        } else {
                            // 不设置版本， 过滤系统
                            if (plateformType || tmpData[i]['plateformType'] == plateformType) {
                                listArr.push(tmpData[i]);
                            }
                        }
                    }
                    
                    // 业务分类 分组   // map  {a: [{}, {}, {}], b: [{}] }
                    var objMap = {};
                    for(var i=0; i<listArr.length; i++) { // bizCategory [业务分类]
                        var artColumns = listArr[i]['artColumn'];
                        if (objMap[artColumns]) { // 判断`bizCategory` 的value 值 
                            objMap[artColumns].push(listArr[i]); 
                        } else {
                            var _listArr = [];
                            _listArr.push(listArr[i]); // [{}, {}, {}]
                            objMap[artColumns] = _listArr;
                        }
                    }
                    
                    // 分组  // 按 objMap key的value遍历   // [{}, {}, {}]
                    // 是否显示  和  是否当前城市  
                    var availableDetails = []; 
                    for(var j in objMap) {
                        if (objMap[j].length == 1 && objMap[j][0].isShow == 1) { // isShow （1【显示】 0【隐藏】）
                            /*if (objMap[j][0]['generic'] == 1) { // generic （1【全国显示】 0【全国隐藏】）
                                availableDetails.push(objMap[j][0]);
                            } else if (objMap[j][0]['cityCode'] == cityCode) {
                                availableDetails.push(objMap[j][0]);                                
                            }*/
                            if (objMap[j][0]['generic'] == 1) { // generic （1【全国显示】 0【全国隐藏】）
                            // 判断是否全国 
                                availableDetails.push(objMap[j][0]);
                            } else {
                            // cityCode 
                                var codeArr = objMap[j][0]['cityCode'].split(',');
                                for (var n=0; n<codeArr.length; n++) {
                                    if (codeArr[n] == cityCode) {
                                        availableDetails.push(objMap[j][0]);   
                                    }
                                }                               
                            }
                        } else {
                            var tmp = objMap[j];  //  {a: [{}, {}, {}], b: [{}] }
                            for(var m=0; m<tmp.length; m++) {
                                // 解析城市code
                                var codeArr = tmp[m]['cityCode'].split(',');
                                for(var t=0; t<codeArr.length; t++) {
                                    if (tmp[m]['generic'] == 1) {
                                    // 全国
                                        availableDetails.push(tmp[m]);
                                        break;
                                    } else if (tmp[m].isShow == true && codeArr[t] == cityCode) {
                                    // 各个城市
                                        availableDetails.push(tmp[m]);
                                    }
                                }
                            }
                        }
                    }
                    
                    var info = [];
                    // 首页显示
                    for (var t=0; t<availableDetails.length; t++) {
                        if (availableDetails[t]['isIndex'] == 1) { // [1,推荐到首页，0，不推荐] 默认值 0
                            info.push(availableDetails[t]);
                        }
                    }
                    me.read(info);
                    
                    //打点
                    common.ANA_AnalyticsScan();
               }
               
            });
        },
        
        /**
         * 阅读量 接口
         * @param {Object} data
         */
        read: function(data) {
            var me = this;
            
            var milieuObj = {
                'prod':'chexiang',
                'pre':'chexiangpre',
                'sit':'chexiangsit',
                'development': 'chexiangpre' 
            }
            var host = '//cxjapp.'+milieuObj[process.env.NODE_ENV]+'.com';
            
            // http://cxjapp.chexiangsit.com/service/discovery/getPageView/0.htm?jsonp=callbackFunction&articleId=1111
            if (data) {
                var len = data.length;
                var num = len;
                for (var i=0; i<len; i++) {
                    (function(i) {
                        var promise = Vue.http({
                            url: host + '/service/discovery/getPageView/0.htm',
                            params: {"articleId": data[i]['id']},
                            method: 'JSONP',
                            jsonp: 'jsonp'
                        })
                        promise.then(function (response){
                            var d = JSON.parse(response.bodyText);
                            if (d.errorCode == 0) {
                                // 处理浏览量
                                data[i]['view'] = d.result;
                                num = num - 1;
                            }
                            if (num == 0) {
                                // 推荐列表
                                me.listMsg = data;
                            }
                        });
                        
                    })(i);
                }
            }
        },
        
        /**
         * 解析json
         * @param {Object} data
         */
        parseData: function(data) {
            var _data;
            if (!data) return data;
            try{
                _data = JSON.parse(data);
            }catch(e){
                _data = data;
            }
            return _data;
        },
        
        
        /**
         * 判断登陆情况 
         */
        checkLogin: function(isLogin, detailsUrl, urlType) {
            var me = this;
            // isLogin 【1 需要登陆， 0 不需要登陆】
            if (isLogin == 1) {
                lb.getUserInfo(function(data) {
                    var errorCodes = data.errorCode;
                     // 唤起登陆 
                    if (errorCodes != 0) {
                        lb.redirect( "login" ,function(data){
                            try{
                                if(data.errorCode == '0'){//success
//                                  me.getUserInfo();
                                }else{//error
                                    $.logError("cxb -- lbLogin -- Error ! data.errorCode ( " + data.errorCode + " ) :" + JSON.stringify(data));
//                                  backhistoryUrl();
                                }
                            }catch(e){
                                $.logError("cxb -- lbLogin -- Error ! " + JSON.stringify(data) + " msg : " + e.message);
//                              backhistoryUrl();
                            }        
                        })
                    } else {
                       me.openNewView(detailsUrl, urlType); 
                    }
                });
            } else {
                // 不需要登陆 ， 跳转
                me.openNewView(detailsUrl, urlType); 
            }
        },
        
        /**
         * 判断是否是对象
         * @param {Object} obj
         * @return 
         */
        isObject: function(obj) {
            return obj && (typeof(obj) != 'string') ? true : false;
        },
        
        /**
         * 新窗口打开 当前链接
         * @param {Object} src
         * @param {String} urlType 跳转类型
         */
        openNewView: function(src, urlType){
            var host = window.location.origin;
            if (common.getChannel() !='appCode') {
               // [1,跳转文章列表栏目  0,跳转链接]
                if (urlType == 0) {
                   window.location.href = src;
                } else {
                   window.location.href = host + src;      
                }
            } else {
                // [1,跳转文章列表栏目  0,跳转链接]
                if (urlType == 0) {
                    lb.newWebview({'url': src});  
                } else {
                    lb.newWebview({'url':host+src});
                }
            }
        }
       
    }
}
   
</script>

<style lang="scss">
@import '../../assets/css/common.scss';    
    
@function rem($px){
  @return $px / 10 * 1rem;
}  
  
.discover .mt10 {
    margin-top: 0;
}
.listbox .active {
    padding: 0 rem(15);
}

$_fff: #fff;
$_243742: #243742; 

$sans-serif: "PingFangSC-Regular,'Helvetica Neue', Helvetica, Rotobo";
$font-family: $sans-serif;
    
body {
    background: #f4f4f4;
}
.last-end {
    text-align: center;
    line-height: rem(50);
    font-size: rem(12);
    color: #8392A0;
}
.discover{
    /*font-family: "Microsoft YaHei";*/
    /*padding: 0 rem(15);*/
    .consulting-center {
        margin-top: rem(10);
    }
    .life{
        text-align:center;
        background:$_fff;
        overflow: hidden;
        .title {
            padding: rem(20) 0 rem(9) 0;
            font-size: rem(16);
            line-height: rem(27);
            text-align: center;
            em.line {
                float: left;
                width: rem(36);
                height: 1px;
                margin-top: rem(12);
            }
            span.tit {
                padding: 0 rem(18);
                float: left;
                font-size: rem(15);
            }
            .tit-warp {
                display: inline-block;
            }
        }
        ul{
            /*padding:rem(0) 0 rem(8) rem(5);*/
            padding-bottom: rem(10);
            padding-left: rem(15);           
            padding-right: rem(15);           
            background:$_fff;
            li:nth-child(2n){
                margin-right: 0;
            }
            li{
                width:rem(340/2);
                height:rem(190/2);
                /*margin-bottom:rem(5);*/
                margin-right:rem(5);
                flex-wrap:wrap;
                float: left;
                overflow: hidden;
                position: relative;
                &:before {
                    content: "";
                    width: rem(44);
                    height: rem(44);
                    position: absolute;
                    left: 0;
                    top: 0;
                    /*background: url('../../../assets/images/img4/icon.png') left center no-repeat;*/
                    background-size: contain;
                }
                img{
                    width:100%;
                }
                a {
                    display: block;
                }
                .desc {
                    position: absolute;
                    left: 50%;
                    bottom: 10%;
                    transform: translate(-50%);
                    text-align: center;
                    color: #e3e6eb;
                    font-size: rem(16);
                }
            }
        }
    }
}
</style>

